<template>
  <div class="bed-wrap">
    <div class="bed-top">
      <div class="bed-item" :class="{'active': currentView == item.id}" v-for="item in buildingData" @click="handleChangeBuilding(item)" :key="item.id">
        <span class="bed-item-img">
          <img src="@/assets/bed-home/home-top1.png" alt="" />
        </span>
        {{ item.name }}
      </div>
      <el-tooltip class="tooltip-wrap" placement="bottom">
        <div slot="content">
          温馨提示：<br/>
          房间状态：绿色代表有人入住，灰色代表房间未住满，蓝色代表房间有人预约<br/>
         </div>
        <img src="@/assets/images/bj-icon2.png" >
      </el-tooltip>
    </div>
    <div class="bed-content">
      <div class="bed-left">
        <div class="bed-left-item" v-for="item in floorData" :key="item.id" :class="{'active': currentFloorView == item.id}" @click="handleChangeFloor(item)">{{ item.name }}</div>
      </div>
      <div class="bed-right">
        <el-row :gutter="16">
          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" v-for="item in roomList" :key="item.id">
            <!-- colorType1 -->
            <div class="room-item" :class="{'colorType1': item.status == 3 || item.status == 0, 'colorType2': item.status == 2}">
              <div class="room-top">
                <div class="room-top-left">
                  <span></span>
                  <div>{{ item.room_code }}房</div>
                </div>
                <div class="room-top-right">
                  <!-- colorBedType1 -->
                  <div class="room-right-item" v-for="ite in item.bed_list" :key="ite.id">
                    <div class="room-right-item-left">
                      <div class="rml-top">
                        <span></span>
                        {{ ite.bed_code }}床
                      </div>
                      <!-- bedstatus2 -->
                      <div class="rml-bot" :class="{'bedstatus2': ite.status == 2, 'bedstatus3': ite.status == 0 || ite.status == 3}">
                        {{
                          ite.status == 1
                            ? "床位空闲"
                            : ite.status == 2
                            ? "有人入住"
                            : "有人预约"
                        }}
                      </div>
                      <div v-if="ite.status == 2"  @click="handleSelectbed(ite.elder.id)" class="rml-bot change-bed">变更床位</div>
                    </div>
                    <div class="room-right-item-right">
                      <p>老人姓名：{{ ite.elder && ite.elder.name || '暂无' }}</p>
                      <p>老人性别：{{ ite.elder && (ite.elder.sex == 1 ? '男' : ite.elder.sex == 2 ?'女' : "暂无") }}</p>
                      <p>老人年龄：{{ ite.elder && ite.elder.age || '暂无' }}</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="room-bottom">
                <div class="room-title">摇床/介护型 1000.00元/月</div>
                <div v-if="item.carer_list && item.carer_list.length" class="room-carer">
                  护工：<span v-for="(carer, caindex) in item.carer_list" :key="caindex">{{ carer && carer.name }} {{ caindex+1 == item.carer_list.length ? '' : '，' }}</span>
                </div>
                <div v-else class="room-carer"></div>
               <div class="room-action">
                  <button class="room-success" @click="handleNurse(item.id)">护工管理</button>
                  <button class="room-success" @click="devicebind(item)">设备列表</button>
                  <button class="room-danger" @click="deleteRoom(item.id)">删除房间</button>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-dialog
      title="护工管理"
      :visible.sync="dialogVisibleNurse"
      width="60%"
      :before-close="closeDialogNurse"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <div class="table-do">
          <el-row>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <el-button
                type="primary"
                icon="el-icon-plus"
                class="sureBtn"
                size="mini"
                :data-id="bed_id"
                @click="handleAddNurse"
              >
                设置护工
              </el-button>
            </el-col>
          </el-row>
        </div>
        <el-table
          :data="data2"
          stripe
          :header-cell-style="{ backgroundColor: '#409EFF', color: '#fff' }"
        >
          <el-table-column
            v-for="(item, index) in tableColumns2"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :formatter="item.formatter"
            :filters="item.filters"
            :class-name="item.className"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleDeleteNurse(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog
        width="30%"
        title="新增/编辑护工"
        :visible.sync="innerVisibleNurse"
        :before-close="closeVisibleNurse"
        append-to-body
        :close-on-click-modal="false"
      >
        <el-form
          ref="hsForm"
          :model="hsForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="护工姓名" prop="c_id">
                <el-select
                  v-model="hsForm.c_id"
                  clearable
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入姓名"
                  :remote-method="remoteMethod"
                  :loading="loading"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in nurseData"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="护工工号" prop="c_id">
                <el-input v-model="hsForm.c_id" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-footer">
          <el-button
            type="primary"
            class="sureBtn"
            size="mini"
            @click="saveNurse"
          >
            提 交
          </el-button>
          <el-button
            type="info"
            class="setBtn"
            size="mini"
            @click="cancel('hsForm')"
          >
            取 消
          </el-button>
        </div>
      </el-dialog>
    </el-dialog>
    <el-dialog
      title="已设备绑定列表"
      :visible.sync="dialogVisibleEq"
      width="60%"
      :before-close="closeDialogEq"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <div class="table-do">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              已绑定设备列表
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-table
              :data="binddeviceList"
              stripe
              :header-cell-style="{ backgroundColor: '#409EFF', color: '#fff' }"
            >
              <el-table-column
                v-for="(item, index) in tableColumns"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                :formatter="item.formatter"
                :filters="item.filters"
                :class-name="item.className"
                :show-overflow-tooltip="true"
              ></el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
    <el-dialog
      title="床位选择"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
      :modal-append-to-body="true"
      class="dialogForm"
    >
      <div class="dialog-main">
        <el-tabs
          v-model="mainactive"
          type="border-card"
        >
          <el-tab-pane
            v-for="(item, index) in options"
            :key="index"
            :label="item.label"
            :name="item.value"
          >
            <el-tabs type="card" tab-position="left">
              <el-tab-pane
                v-for="(ite, idx) in item.children"
                :key="idx"
                :label="ite.label"
              >
                <el-row :gutter="20">
                  <template v-for="(floor, i) in ite.children">
                    <el-col :key="i" :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
                      <div class="bedlist-item">
                        <div
                          class="bedlist-item-header"
                          :class="
                            floor.status
                              ? backgroundColor[0]
                              : backgroundColor[2]
                          "
                        >
                          <div class="bedlist-item-hl">{{ floor.label }}房</div>
                          <div class="bedlist-item-hr">
                            <div class="bedlist-item-hrt">
                              {{ floor.children[0] && floor.children[0].bed_name }}
                              <p>{{ floor.children[0] && floor.children[0].price }}元/月</p>
                            </div>
                          </div>
                        </div>
                        <div class="bedlist-content">
                          <div class="tpl2-wrap">
                            <div
                              v-for="(bedItem, bedIndex) in floor.children"
                              :key="bedIndex"
                              class="tpl2-left"
                            >
                              <div class="tpl2-title">
                                {{ bedItem.label }}床
                                <el-tag
                                  v-if="bedItem.status"
                                  size="mini"
                                  type="succes"
                                >
                                  有人入住
                                </el-tag>
                                <el-tag
                                  v-else
                                  size="mini"
                                  type="info"
                                  style="cursor: pointer"
                                  @click="
                                    handleChooseBed(
                                      `${item.label},${ite.label},${floor.label}房,${bedItem.label}床`,
                                      `${item.id},${ite.id},${floor.id},${bedItem.id}`,
                                      bedItem.type
                                    )
                                  "
                                >
                                  床位空闲
                                </el-tag>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-col>
                  </template>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import roomForm from "@/components/CommonForm/roomForm";
  import { getList,bedupdate } from "@/api/bedList";
  import { getData } from "@/api/floorData";
  import { getOlder } from "@/api/oldermanager";
  import { getBedType } from "@/api/bedType";
  import { setNurse, getHgList, getNurseList } from "@/api/nursemanager";
  import { getBuilding, getFloor, getRoom } from "@/api/building";
  import { devicebind, getdevice, deviceIotlog, getdevicelist } from "@/api/device";
  import * as Api_ysxroom from "@/api/ysxroom";
  import dictData from "@/utils/dictionary";
  const dict = dictData;
  export default {
    name: "BadNum",
    components: { roomForm },
    filters: {
      sexFilter(value) {
        if (value == 1) {
          return "男";
        } else if (value == 2) {
          return "女";
        } else {
          return "未填写";
        }
      },
      typeFilter(value) {
        for (let i = 0; i < dict.olderType.length; i++) {
          const element = dict.olderType[i];
          if (value == i + 1) {
            return element;
          }
        }
      },
    },
    // mixins: [mixinstest],
    data() {
      return {
        //楼栋列表信息
        buildingData: [],
        //楼层列表信息
        floorData: [],
        //房间列表信息
        roomList: [],
        //目前的楼栋
        currentView: 0,
        //目前的楼层
        currentFloorView: 0,
        // 护工管理
        dialogVisibleNurse: false,
        bed_id: "",
        innerVisibleNurse: false,
        hsForm: {},
        tableColumns2: [
          { prop: "name", label: "护士姓名" },
          { prop: "c_id", label: "护士工号" },
        ],
        nurseData: [],
        loading: false,
        data2: [],
        rules: {},
        dialogVisibleEq: false,
        tableColumns: [
          { prop: "code", label: "设备编号" },
          { prop: "name", label: "设备名称" },
          { prop: "type", label: "设备类型", formatter: this.genderFormatter },
        ],
        binddeviceList: [],
        //床位选择
        dialogVisible: false,
        mainactive: "first",
        backgroundColor: ["colorTypeb0", "colorTypeb1", "colorTypeb2"],
        options: [],
        oid:"",
      };
    },
    // computed: {
    //   webSocketMsg() {
    //     return this.$store.state.websocket.webSocketMsg
    //   }
    // },
    beforeDestroy() {},
    // watch:{
    //     webSocketMsg:{
    //       handler: function(newVal) {
    //         this.init(newVal, this)
    //       }
    //     }
    // },
    mounted() {
      this.getData();
      this.getBuildingData();
    },
    methods: {
      genderFormatter(row, column) {
        let type = ""
        switch (row.type) {
          case 1:
            type = "灯"
            break;
          case 2:
            type = "SOS"
            break;
          case 3:
            type = "门禁"
            break;
          case 4:
            type = "可燃气体"
            break;
          case 5:
            type = "人体红外传感"
            break;
          case 6:
            type = "烟雾"
            break;
          case 7:
            type = "窗帘"
            break;
          case 8:
            type = "漏水检测"
            break;
          case 9:
            type = "温湿度检测"
            break;
          case 10:
            type = "安防报警"
            break;
          case 11:
            type = "床垫报警"
            break;
        }
        return type
      },
      closeDialogEq() {
        this.dialogVisibleEq = false;
      },
      devicebind(item) {
        this.room_id = item.id;
        this.dialogVisibleEq = true;
        getdevicelist("get", { room_id: item.id }).then((res) => {
          this.binddeviceList = res?.data?.list || [];
        });
      },
      deleteRoom(id) {
        this.$confirm("此操作将永久删除该房间, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let param = {
              id: id,
            };
            getRoom("delete", param).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getTableData();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      saveNurse() {
        this.$refs["hsForm"].validate(async (valid) => {
          if (valid) {
            if (this.hsForm.id) {
              setNurse("put", {
                id: this.hsForm.id,
                bed_id: this.hsForm.bed_id,
                c_id: this.hsForm.c_id,
              }).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                  this.cancel("hsForm");
                  let params = {
                    bed_id: this.bed_id,
                  };
                  this.getNurseList(params);
                  this.getNurseData();
                } else {
                  this.$message({
                    type: "success",
                    message: resp.msg,
                  });
                }
              });
            } else {
              setNurse("post", this.hsForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                  this.cancel("hsForm");
                  let params = {
                    bed_id: this.bed_id,
                  };
                  this.getNurseList(params);
                  this.getNurseData();
                }
              });
            }
          }
        });
      },
      remoteMethod(query) {
        let _this = this;
        if (query !== "") {
          this.loading = true;
          setTimeout(() => {
            let data = {
              name: query,
            };
            getHgList("get", data).then((resp) => {
              if (resp.code === 200) {
                console.log(resp);
                _this.loading = false;
                _this.nurseData = resp.data.list;
              }
            });
          }, 200);
        } else {
          this.getNurseData();
        }
      },
      handleDeleteNurse(id) {
        this.$confirm("此操作将永久删除该护工, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let param = {
              id: id,
            };
            getNurseList("delete", param).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                let params = {
                  bed_id: this.bed_id,
                };
                this.getNurseList(params);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      closeVisibleNurse() {
        this.innerVisibleNurse = false;
        this.$refs["hsForm"].resetFields();
        this["hsForm"] = {};
      },
      handleAddNurse(e) {
        let id = e.currentTarget.dataset.id;
        this.$set(this.hsForm, "bed_id", id);
        this.bed_id = id;
        this.innerVisibleNurse = true;
      },
      getNurseList(data) {
        getNurseList("get", data).then((resp) => {
          if (resp.code === 200) {
            this.data2 = resp.data.list;
          }
        });
      },
      handleNurse(id) {
        this.dialogVisibleNurse = true;
        this.$set(this.hsForm, "bed_id", id);
        this.bed_id = id;
        let params = {
          bed_id: id,
        };
        this.getNurseList(params);
      },
      closeDialogNurse() {
        this.dialogVisibleNurse = false;
        this.data2 = [];
      },
      init(res, _that){
        let result = JSON.parse(res)
        if(!result){
          return false
        }
        if(result.route == 'device_onoff') {
          let data = result.data;
          if(data.type == 11) {
            _that.roomList.forEach((ite, idx) => {
              ite.bed_list.forEach((m, n) => {
                m.bed_device.forEach((x, y) => {
                  if(x.code == data.device_id) {
                    //在床
                    if(data.status[1].value == 0) {
                      _that.$set(_that.roomList[idx].bed_list[n], 'on_bed', 1)
                    } else { //离床
                      _that.$set(_that.roomList[idx].bed_list[n], 'on_bed', 0)
                    }
                    //未尿床
                    if(data.status[2].value == 0) {
                      _that.$set(_that.roomList[idx].bed_list[n], 'is_wet', 0)
                    } else { //尿湿
                      _that.$set(_that.roomList[idx].bed_list[n], 'is_wet', 1)
                    }
                  }
                })
              })
            })
          }
          if(data.type == 12) {
            _that.roomList.forEach((ite, idx) => {
              ite.bed_list.forEach((m, n) => {
                m.bed_device.forEach((x, y) => {
                  if(x.code == data.device_id) {
                    //未尿床
                    if(data.status[2].value == 0) {
                      _that.$set(_that.roomList[idx].bed_list[n], 'is_wet', 0)
                    } else { //尿湿
                      _that.$set(_that.roomList[idx].bed_list[n], 'is_wet', 1)
                    }
                  }
                })
              })
            })
          }
        }
      },
      //切换楼栋
      handleChangeBuilding(item) {
        let params = {
          building_id: item.id,
        };
        this.currentView = item.id;
        if (params.building_id) this.getFloorData(params);
      },
      //切换楼层
      handleChangeFloor(item) {
        let floor_id = item.id;
        this.currentFloorView = item.id;
        if (floor_id) this.getTableData(floor_id);
      },
      //获取楼栋信息
      getBuildingData(data) {
        getBuilding("get", data).then((resp) => {
          if (resp.code === 200) {
            this.buildingData = resp?.data?.list.reverse() || [];
            this.building_id = this.buildingData[0].id;
            this.currentView = this.buildingData[0].id;
            this.activename = this.buildingData[0].name;
            let params = {
              building_id: this.building_id,
            };
            if (this.building_id) this.getFloorData(params);
          }
        });
      },
      //获取楼层信息
      getFloorData(data) {
        getFloor("get", data).then((resp) => {
          if (resp.code === 200) {
            this.floorData = resp?.data?.list || [];
            if (resp.data.list.length == 0) return;
            this.floor_id = this.floorData[0].id;
            this.currentFloorView = this.floorData[0].id;
            this.flooractivename = this.floorData[0].name;
            this.getTableData(resp.data.list[0].id);
          }
        });
      },
      //获取房间信息
      getTableData(floor_id) {
        this.selectForm = {
          page_size: 120,
          floor_id,
        };
        getList("get", this.selectForm).then((resp) => {
          if (resp.code === 200) {
            const data = resp.data.list;
            data.map((item) => {
              let obj = {};
              obj.status1 = item.bed_list.filter((i) => {
                return i.status == 1;
              });
              obj.status2 = item.bed_list.filter((i) => {
                return i.status == 2;
              });
              obj.status3 = item.bed_list.filter((i) => {
                return i.status == 3;
              });
              item.status = obj.status3.length > 0 ? 3 : obj.status2.length > 0 ? 2 : 1;
            });
            this.roomList = data;
          }
        });
      },
      getData(data) {
        getData("get", data).then((resp) => {
          if (resp.code === 200) {
            const data = resp?.data || [];
            data.map(item => {
              item.children.map(ite => {
                ite.children.map(room => {
                  let obj = {};
                  room.children.map(bed => {
                    obj.status = room.children.filter((i) => {
                      return i.status == false;
                    });
                  })
                  room.status = obj.status && obj.status.length > 0 ? false : true;
                })
              })
            })
            this.options = resp.data;
            this.mainactive = resp.data[0].value;
          }
        });
      },
      //点击选择床位
      handleSelectbed(oid) {
        this.oid = oid;
        this.dialogVisible = true;
      },
      closeDialog() {
        this.dialogVisible = false;
        this.formData = {
          base: {},
        };
      },
      handleChooseBed(value, id, type) {
        this.$confirm("确定要变更当前老人的床位吗, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let floor_idsArr = [];
            if (id) {
              floor_idsArr = id.split(",");
            }
            let params = {
              id: floor_idsArr[floor_idsArr.length - 1],
            };
            let param = {
              e_id:this.oid,
              floor_str:value,
              floor_ids:floor_idsArr,
              bed_fees_id:type
            };
            bedupdate("post", param).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  duration:2000,
                  message: "床位变更成功!",
                  onClose:()=>{
                      　 //关闭弹窗
                        this.dialogVisible = false;
                        //刷新页面数据
                        this.getTableData(this.currentFloorView);
                        //刷新床位弹窗数据
                        this.getData();
                      }
                })
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消操作",
            });
          });
       /* this.handleBedFees(type);
        this.$set(this.liveForm, "bed_fees_id", type);
        this.$set(this.liveForm, "floor_str", value);
        this.$set(this.liveForm, "floor_idsArr", id.split(",")); */
      },
    },
  };
</script>
<style lang="scss" scoped>
  .change-bed{
    cursor: pointer;
    background: #ffb752 !important;
    border: 1px solid #ffb752 !important;
  }
  .colorTypeb0 {
    background: #18ba39;
  }
  .colorTypeb1 {
    background: #e0c720;
  }
  .colorTypeb2 {
    background: #999;
  }
  .bedlist-item {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
    .bedlist-item-header {
      width: 100%;
      font-size: 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #dddfe7;
      box-sizing: border-box;
      .bedlist-item-hl {
        display: inline-block;
        width: 30%;
        text-align: center;
        //color: darkred;
        color: #fff;
        font-weight: bold;
      }
      .bedlist-item-hr {
        display: inline-block;
        width: 70%;
        border-left: 1px solid #dddfe7;
        padding: 10px 0;
        .bedlist-item-hrt {
          font-size: 16px;
          text-align: center;
          color: #fff;
        }
        .bedlist-item-hrb {
          border-top: 1px solid #dddfe7;
          margin-top: 10px;
          text-align: right;
          padding: 10px 10px 0 10px;
          ::v-deep {
            .el-button--mini {
              padding: 5px 6px;
            }
          }
        }
      }
    }
  }
  .tpl2-wrap {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dddfe7;
    border-top: none;
    display: flex;
    justify-content: space-between;
    overflow-x: scroll;
    .tpl2-left {
      width: 50%;
      padding: 10px;
      &:nth-child(n + 2) {
        border-left: 1px solid #dddfe7;
      }
    }
    .tpl2-title {
      color: #f60;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
    }
    .tpl2-content {
      display: flex;
      justify-content: space-between;
      margin: 10px;
    }
    .tpl2-action {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      span {
        cursor: pointer;
        &:hover {
          color: #1791ff;
        }
      }
    }
    .elderWrapper {
      display: flex;

      .elderAvatar {
        display: flex;
        flex: 0 0 200px;
        align-items: center;
        width: 200px;
        height: 200px;
        margin-right: 20px;
        overflow: hidden;
        border-radius: 5px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .elderInfo {
        p {
          width: 202px;
          overflow: hidden;
          font-style: 14px;
          line-height: 24px;
          color: #fff;
          text-overflow: ellipsis;
          white-space: nowrap;

          span {
            color: #2cc1bb;
          }
        }
      }
    }
  }
  .tooltip-wrap{
    width: 30px;
    position: absolute;
    right: 20px;
    top: 10px;
  }
  .dialog-main {
    .table-do {
      margin-bottom: 15px;
    }

    ::v-deep {
      th {
        .cell {
          color: #fff;
        }
      }
    }
  }
  .bed-wrap{
    background-color: #0A1E3D;
    min-height: calc(100vh - 65px) !important;
    // 头部css
    .bed-top{
      position: relative;
      padding-left: 20px;
      width: 100%;
      height: 55px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      background: #16325D;
      box-sizing: border-box;
      box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.35);
      .active{
        .bed-item-img{
          background: url(../../../assets/bed-home/home-top-bg2.png) no-repeat;
          background-size: 100%;
        }
      }
      .bed-item{
        display: flex;
        align-items: center;
        color: #ffffff;
        font-size: 16px;
        cursor: pointer;
        &:nth-child(n+2) {
          margin-left: 23px;
        }
        &:hover{
          .bed-item-img{
            background: url(../../../assets/bed-home/home-top-bg2.png) no-repeat;
            background-size: 100%;
          }
        }
        img{
          width: 13px;
          height: 14px;
        }
      }
      .bed-item-img{
        display: inline-block;
        width: 29px;
        height: 34px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 5px;
        background: url(../../../assets/bed-home/home-top-bg1.png) no-repeat;
        background-size: 100%;
      }
    }
    // 头部css end
    // 内容css start
    .bed-content{
      width: 100%;
      padding: 20px;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      .bed-left{
        .bed-left-item{
          width: 77px;
          height: 35px;
          background: url(../../../assets/bed-home/home-left2.png) no-repeat;
          background-size: 100%;
          display: flex;
          align-items: center;
          padding-left: 10px;
          cursor: pointer;
          font-size: 14px;
          color: #ffffff;
          &:hover{
            background: url(../../../assets/bed-home/home-left1.png) no-repeat;
            background-size: 100%;
          }
          &:nth-child(n+2) {
            margin-top: 5px;
          }
        }
        .active{
          background: url(../../../assets/bed-home/home-left1.png) no-repeat;
          background-size: 100%;
        }
      }
      .bed-right{
        flex: 1;
        margin-left: 10px;
        margin-top: -10px;
      }

      .room-item{
        width: 100%;
        height: 380px;
        background: url(../../../assets/bed-home/home-bg2.png) no-repeat;
        background-size: 100% 100%;
        padding: 11px;
        box-sizing: border-box;
        margin: 10px 0;
        .room-top{
          height: 205px;
          display: flex;
          justify-content: center;
          align-items: center;
          .room-top-left{
            text-align: center;
            span{
              display: inline-block;
              width: 38px;
              height: 34px;
              background: url(../../../assets/bed-home/home1.png) no-repeat;
              background-size: 100%;
            }
            div{
              font-size: 23px;
              color: #ffffff;
              margin-top: 6px;
            }
          }
          .room-top-right{
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 10px 0;
            padding-top: 12px;
            margin-left: 10px;
            box-sizing: border-box;
            scrollbar-width: none; /* firefox */
            -ms-overflow-style: none; /* IE 10+ */
            &::-webkit-scrollbar {
              display: none; /* Chrome Safari */
            }
            .room-right-item{
              display: flex;
              justify-content: flex-start;
              align-items: center;
              padding: 10px;
              &:nth-child(n+2) {
                margin-top: 10px;
              }
            }
            .room-right-item-left{
              .rml-top{
                color: #fff;
                font-size: 16px;
                line-height: 16px;
                span{
                  margin-right: 15px;
                  display: inline-block;
                  width: 14px;
                  height: 16px;
                  background: url(../../../assets/bed-home/bed-man1.png) no-repeat;
                  background-size: 100%;
                  vertical-align: middle;
                }
              }
              .rml-bot{
                margin-top: 7px;
                width: 68px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                background: #64c13d;
                border: 1px solid #64c13d;
                border-radius: 3px;
                font-size: 14px;
                color: #ffffff;
              }
              //有人入住
              .bedstatus2{
                // color: #FFB400;
                // background: #FFF3D4;
                // border: 1px solid #FEEBBA;
                color: #ffffff;
                background: #1890ff;
                border: 1px solid #1890ff;
              }
              //有人预约
              .bedstatus3{
                color: #0082FF;
                background: #E8F4FF;
                border: 1px solid #BDDFFE;
              }
            }
            .room-right-item-right{
              margin-left: 25px;
              p{
                font-size: 15px;
                color: #FFFFFF;
                line-height: 13px;
                &:nth-child(n+2) {
                  margin-top: 11px;
                }
              }
            }
          }

        }
        .room-bottom{
          margin-top: 13px;
          padding-top: 15px;
          .room-title {
              font-size: 20px;
              line-height: 19px;
              color: #fff;
              text-align: center;
          }
          .room-carer {
              font-size: 16px;
              color: #fff;
              line-height: 16px;
              height: 16px;
              text-align: center;
              margin-top: 12px;
          }
          .room-action{
            margin-top: 10px;
            display: flex;
            justify-content: center;
            button{
              width: 86px;
              height: 26px;
              text-align: center;
              line-height: 26px;
              border-radius: 5px;
              box-sizing: border-box;
              font-size: 13px;
              outline: none;
              cursor: pointer;
              &:nth-child(n+2) {
                margin-left: 20px;
              }
            }
            .room-success{
              background: #E8F4FF;
              color: #0082FF;
              border: 1px solid #BDDFFE;
            }
            .room-danger{
              background: #FFDFDF;
              border: 1px solid #FEB6B6;
              color: #FF1515;
            }
          }
        }
      }
      //房间有人预约
      .colorType1{
        background: url(../../../assets/bed-home/home-bg1.png) no-repeat;
        background-size: 100% 100%;
        .room-top{
          .room-top-left{
             span{
               background: url(../../../assets/bed-home/home2.png) no-repeat;
               background-size: 100%;
             }
          }
        }

      }

      //房间有人住满
      .colorBedType2 {
        background-color: rgb(43 113 222) !important;
        border-radius: 10px !important;
        .rml-top{
          color: #FFA200 !important;
          span{
            background: url(../../../assets/bed-home/bed-man2.png) no-repeat !important;
            background-size: 100% !important;
          }
        }
      }
      //在床
      .colorType2{
        background: url(../../../assets/bed-home/home-bg3.png) no-repeat;
        background-size: 100% 100%;
        .room-top{
          .room-top-left{
             span{
               background: url(../../../assets/bed-home/home3.png) no-repeat;
               background-size: 100%;
             }
          }
        }
      }
      //尿床
      .colorBedType1 {
        background-color: rgb(150 184 13) !important;
        border-radius: 10px !important;
        .rml-top{
          color: #FF455B !important;
          span{
            background: url(../../../assets/bed-home/bed-man3.png) no-repeat !important;
            background-size: 100% !important;
          }
        }
      }

    }
  }

</style>
